import React, { Component } from 'react';
import { connect } from 'dva';
import { routerRedux, Link } from 'dva/router';
import { Form, Input, Button, Radio, Cascader } from 'antd';
import styles from './step1.less';
import areaData from '../area.json';
import PicturesWall from './PicturesWall';

const { TextArea } = Input;
const FormItem = Form.Item;
const RadioGroup = Radio.Group;

const passwordStatusMap = {
  ok: <div className={styles.success}>强度：强</div>,
  pass: <div className={styles.warning}>强度：中</div>,
  poor: <div className={styles.error}>强度：太短</div>,
};

const passwordProgressMap = {
  ok: 'success',
  pass: 'normal',
  poor: 'exception',
};

@connect(({ register, loading }) => ({
  register,
  submitting: loading.effects['register/step2Validate'],
}))
@Form.create()
export default class Register extends Component {
  state = {
    count: 0,
    confirmDirty: false,
    visible: false,
    help: '',
  };

  componentDidMount() {
    const { info, account } = this.props.register;
    const { form, dispatch } = this.props;
    if (!account) {
      dispatch(routerRedux.push('/user/register/info'));
    }
    info && form.setFieldsValue(info);
  }

  onValidateForm = () => {
    const { form, dispatch } = this.props;
    form.validateFields((err, values) => {
      if (!err) {
        //console.log('asdfasdf');
        dispatch({
          type: 'register/step2Validate',
          payload: { info: values },
          callback: () => {
            dispatch(routerRedux.push('/user/register/result'));
          },
        });
      }
    });
  };

  idCardImgChange = fileList => {
    //console.log(fileList);
  };

  isCaipan = () => {
    const { form, dispatch } = this.props;
    if (form.getFieldValue('userRole') === 'cp') {
      return true;
    } else {
      return false;
    }
  };

  cpIdCardImgChange = fileList => {
    //console.log(fileList);
  };

  onCascaderChange = (value, selectedOptions) => {};

  cascaderfilter = (inputValue, path) => {
    return path.some(option => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1);
  };

  render() {
    const { form, submitting } = this.props;
    const { getFieldDecorator } = form;

    const validatorIDCard = (rule, code, callback) => {
      if(!code){
        callback()
        return
      }
      code = code.split('');
      //∑(ai×Wi)(mod 11)
      //加权因子
      var factor = [ 7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2 ];
      //校验位
      var parity = [ 1, 0, 'X', 9, 8, 7, 6, 5, 4, 3, 2 ];
      var sum = 0;
      var ai = 0;
      var wi = 0;
      for (var i = 0; i < 17; i++)
      {
          ai = code[i];
          wi = factor[i];
          sum += ai * wi;
      }
      var last = parity[sum % 11];
      if(parity[sum % 11] != code[17]){
        callback('身份证不合法!');
      }
      callback();
    };

    return (
      <div className={styles.main}>
        <Form layout="horizontal" hideRequiredMark>
          <FormItem>
            {getFieldDecorator('nickName', {
              rules: [
                {
                  required: true,
                  message: '请输入姓名！',
                },
              ],
            })(<Input size="large" placeholder="您的姓名" />)}
          </FormItem>
          <FormItem extra='用来关联赛事报名信息，不正确的身份证可能无法关联比赛'>
            {getFieldDecorator('idCard', {
              rules: [
                {
                  required: true,
                  message: '请输入身份证！',
                },
                {
                  validator: validatorIDCard,
                  message: '身份证不合法!',
                },
                {

                }
              ],
            })(<Input size="large" placeholder="请输入身份证" />)}
          </FormItem>
          <FormItem>
            {getFieldDecorator('areaData', {
              rules: [
                {
                  required: true,
                  message: '请选择省、市、区！',
                },
              ],
            })(
              <Cascader
                options={areaData}
                onChange={this.onCascaderChange}
                placeholder="Please select"
                //showSearch={this.cascaderfilter}
                placeholder="选择省份"
              />
            )}
          </FormItem>
          {/* <FormItem>
            {getFieldDecorator('idCardImg', {
              rules: [
                {
                  required: true,
                  message: '请上传身份证照片！',
                },
              ],
            })(<PicturesWall onChange={this.idCardImgChange} title="请上传身份证照片" />)}
          </FormItem> */}
          <FormItem>
            {getFieldDecorator('note', {
              rules: [],
            })(
              <TextArea
                rows={5}
                size="large"
                placeholder="为了让别人更了解您，请输入您的个人简介"
              />
            )}
          </FormItem>
          <FormItem>
            <Link to="/user/register/info">
              <Button>上一步</Button>
            </Link>
            <Button
              size="large"
              type="primary"
              loading={submitting}
              onClick={this.onValidateForm}
              className={styles.login}
            >
              完成注册
            </Button>
          </FormItem>
        </Form>
      </div>
    );
  }
}
